// 1. 获取文章类型
function loadCategory() {
    getCategoryAPI({}, res => {
        var { data: arr } = res.data;
        // 铺设下拉菜单
        // 默认显示个所有分类
        $(".layui-form select[name=cate_id]")
        arr.forEach(obj => {
            var theOption = `<option value="${obj['Id']}">${obj['name']}</option>`;
            $(".layui-form select[name=cate_id]").append(theOption);
            // 这里要注意layui的标签, 要让layui重新监测下里面的option才会渲染出来
            layui.form.render();
        })


        getId();
    })
}
loadCategory();

var id;
// 2. 初始化裁剪插件
var cropper;
function initCropper() {
    // 初始化裁剪插件
    cropper = new Cropper($("#image")[0], {
        aspectRatio: 1, // 裁剪图层的横纵比例
        preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
    });
    // 上传图片 - 点击事件
    $(".select").on("click", () => {
        // JS触发一次file的点击事件 -弹出选择文件窗口
        $("#file").click();
    })

    // 监测 - 文件选择器的变化
    $("#file").on("change", ev => {
        // 取到选择的一个文件
        var [file] = ev.target.files;
        // URL是JS内置对象 - 用于做前端图片 - 本地预览的(无需后台)
        // File对象是一种特殊的Blob类型(Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取)
        // 使用 Blob 创建一个指向类型化数组的URL - 有了url才能用在img的src上
        var imgUrl = URL.createObjectURL(file);
        // 替换拆剪区域图片
        cropper.replace(imgUrl)
    })
}
initCropper();

// 3. assets/lib/tinymce/tinymce_setup.js里, 封装好了, 富文本编辑器启动的方法initEditor, 直接调用即可初始化(跳过去看看代码)
initEditor();

// 4. 监测提交
$(".layui-form").on("submit", function (ev) {
    ev.preventDefault();

    // FormData格式
    var fd = new FormData($(".layui-form")[0]);
    // 遍历：可以看到内部已经添加什么数据？
    // fd.forEach(function (val, key) {
    //     console.log(val, key);
    // })
    // 富文本有名，没有值；需要重新设置下！查文档找如何获取内容！
    fd.set("content", tinyMCE.editors[0].getContent());

    // canvas标签
    // 把裁剪的图片 - 转成base64字符串
    const canvas = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });
    canvas.toBlob(function (file) {
        fd.append("cover_img", file);

        if (id) { // 修改
            fd.append("Id", id);
            updateArticleAPI(fd, () => {
                // 修改成功 - 回到文章页面
                window.location.href = "../list/list.html";
            })
        } else { // 新增
            sendArticleAPI(fd, () => {
                // 发布成功 - 回到首页
                window.location.href = "../list/list.html";
            });
        }

        
    }); // canvas标签 转Blob类型的文件
})


// 5. 从url上获取id, 如果获取不到代表是要新发布的
function getId() {
    var str = window.location.search; // ?id=13
    id = str.slice(4); // 13
    if (id) { // 如果有id, 再请求
        getArticleByIdAPI({ id }, res => {
            form.val("edit", res.data.data);
            // 图片需要单独设置
            // console.log(res.data.data.cover_img);
            // $("#image").attr("src", res.data.data.cover_img);
            cropper.replace(res.data.data.cover_img)
        })
    }
}



